<template>
  <layout title="客户信息" :showTabBar="true">
    <x-icon slot="icon" @click="onAdd" type="plus" style="fill:#fff;position:relative;top:-4px;right:3px;"></x-icon>

    <group title="查询条件">
      <x-input v-model="form.name" title="姓名" placeholder="请输入姓名" text-align="right" placeholder-align="right"></x-input>
      <x-input v-model="form.address" title="地址" placeholder="请输入地址" text-align="right" placeholder-align="right"></x-input>
      <x-button type="primary" action-type="button" style="width:90%; margin:auto;" @click.native="getList">查询</x-button>
      <div style="height:15px;"></div>
    </group>
    <!-- 列表  -->
    <group v-for="li in list">
      <cell :title="li.name" is-link :border-intent="false" arrow-direction="right" @click.native="onCustomer(li)"></cell>
      <template>
        <cell-form-preview :border-intent="false" :list="li.info"></cell-form-preview>
      </template>
      <cell title="联系人" is-link :border-intent="false" arrow-direction="right" @click.native="onContact(li)">
        <div class="badge-value">
          <badge v-if="li.contact.length >0" :text="li.contact.length"></badge>
        </div>
      </cell>
      <template>
        <cell-form-preview :border-intent="false" :list="li.contact"></cell-form-preview>
      </template>
      <cell title="报价信息" is-link :border-intent="false" arrow-direction="right" @click.native="onNeed(li)">
        <div class="badge-value">
          <span class="vertical-middle">
              {{ li.batch_time | time_bbs }}
          </span>
          <badge v-if="li.product.length >0" :text="li.product.length"></badge>
        </div>
      </cell>
      <template>
        <cell-form-preview :border-intent="false" :list="li.product"></cell-form-preview>
      </template>
    </group>
  </layout>

</template>

<script>
  import { XInput, Group, Cell, Divider, PopupPicker, XButton, CellFormPreview, Badge } from 'vux'
  import Layout from './Layout.vue'
  import { customer as api } from '../api'
  import { mapGetters } from 'vuex'
  import _ from 'lodash'

  export default {
    name: 'customer',
    components: {
      XInput,
      Group,
      Cell,
      Divider,
      PopupPicker,
      Layout,
      XButton,
      CellFormPreview,
      Badge,
    },
    filters: {
      hideZero(value) {
        return value ? value : ''
      }
    },
    data() {
      return {
        form: {
          name: '',
          address: '',
          val: []
        },
        list: []
      }
    },
    computed: {
      ...mapGetters(['dicObj'])
    },
    async mounted() {
      this.$store.commit('showBack', false)
      this.$store.commit('selectedTab', 'sale')
      await this.getList()
    },
    methods: {
      onAdd() {
        this.$router.push({ path: '/customer-edit' })
      },
      async getList() {
        let query = {
          name: {
            $like: `%${this.form.name}%`,
          },
          address: {
            $like: `%${this.form.address}%`
          }
        }
        let ret = await api.index(query)
        let list = []
        for (let item of ret.data) {
          let obj = {
            id: item.id,
            name: item.name,
            info: [
              { label: '客户来源', value: this.dicObj[item.source] },
              { label: '客户类型', value: this.dicObj[item.type] },
              { label: '客户性质', value: this.dicObj[item.category] },
              { label: '初步结果', value: this.dicObj[item.result] },
              { label: '合作方式', value: this.dicObj[item.cooperation] },
            ],
            contact: _.map(item.contacts, t => {
              return { label: t.name, value: t.position }
            }),
            product: []
          }
          //增加最新的产品
          if (item.batches.length) {
            let total = 0
            let batch = item.batches[0]
            obj.batch_time = batch.created_at
            obj.product = _.map(batch.batch_products, t => {
              var value = t.num * t.sale_price;
              total += value;
              return { label: `${t.name} x ${t.num}`, value }
            })
            obj.total = total
          }
          list.push(obj)
        }
        this.list = list
      },
      onCustomer(item) {
        this.$router.push({ path: '/customer-edit', query: { id: item.id } })
      },
      onContact(item) {
        this.$router.push({ path: '/contact', query: { customer_id: item.id } })
      },
      onNeed(item) {
        this.$router.push({ path: '/batch', query: { customer_id: item.id } })
      }
    }

  }

</script>
